<template>
	<div style="text-align:center">
		<div id="new_button_container" class="ui very relaxed horizontal list">
			<a v-for="project in projects"
			class="item">
				<router-link class="ui button"
				:to="'/input?id='+project.id">{{project.name}}</router-link>
			</a>
		</div>
     	<div class="ui horizontal divider">Or</div>
      	<div class="ui yellow labeled icon button"
      	@click="popshow = true">
        	新建项目<i class="add icon"></i>
      	</div>
      	<pop :popshow="popshow">
      		<div class="ui icon header">新建项目</div>
	      	<div class="content">
	      		<i class="inverted icon"
	      		:class="{meh: !name, smile: name}"></i>
	      		<div class="ui left pointing white basic label">
	      		    <div class="ui transparent input">
	      		        <input type="text" placeholder="取个好听的名字拉..."
	      		        v-model="name">
	      		    </div>
	      		</div>
	      	</div>
	      	<div class="actions">
		        <div class="ui basic deny inverted button"
		        @click="cancel">
		          <i class="remove icon"></i>取消
		        </div>
		        <div class="ui ok inverted button"
		        :class="{basic: !name, yellow: name}"
		        @click="create">
		          <i class="checkmark icon"></i>新建
		    	</div>
	      	</div>
      	</pop>
    </div>
</template>
<script>
	import AV from '../global.js';
	import pop from './module/Pop.vue'
	export default{
		name: 'new',
		mounted(){
			var query = new AV.Query('Projects');
			query.find().then((response) => {
				let projects = [];
				response.forEach((p) => {
					projects.push({
						name: p.attributes.name,
						id: p.id
					});
				})
				this.projects = projects;
			})
		},
		data(){
			return{
				projects:[],
				newProject: false,
				name:'',
				popshow: false
			}
		},
		methods:{
			cancel(){
				this.popshow = false;
				this.name = '';
			},
			create(){
				var Projects = AV.Object.extend('Projects');
				var pro = new Projects;
				pro.set('name', this.name);
				pro.save().then((pro) => {
					this.$router.push({ path: 'input', query: { id: pro.id }});
				 });
			}
		},
		components:{pop}
	}
</script>
<style lang='less' scoped>
	#new_button_container{
		max-width: 1000px;
		.item{
			padding-bottom: 1.5em;
		}
	}
	.ui.modal{
		.content{
			text-align: center;
		}
		.input{
			width: 20em;
		}
		i.meh,i.smile{
			font-size: 1.8em;
			vertical-align: -.2em;
		}
	}
</style>